<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/common/head.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>角色管理</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="${resource }/css/bootstrap.css" />
		<link rel="stylesheet" href="${resource }/css/iconfont.css" />
	</head>

	<body>
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-sm-4">
				<h2>角色管理</h2>
				<ol class="breadcrumb">
					<li>
						<a href="index.html">主页</a>
					</li>
					<li>
						<strong>角色列表</strong>
					</li>
				</ol>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<!-- 用户列表--bootstrap高级表格使用 -->
				<div class="panel panel-default">
					<div class="panel-heading">
						角色列表
					</div>
					<div class="panel-body">
						<!--table-responsive响应式表格，会自动添加滚动条-->
						<div class="table-responsive">
							<form method="post" action="show.do" id="myform">
								<div class="col-sm-5" id="so" style="float:left">
									<div class="input-group">
										<input type="text" class="form-control"name="roleName"value="${role.roleName }" onkeydown="onKeyDown(event)" placeholder="请输入职位名搜索"/>
										<span class="input-group-addon">
											<a href="javascript:void(0)" onclick="submit()" style="text-decoration:none;">
											<i class="iconfont icon-search"> <span >搜索   </span></i></a>
										</span>
									</div>
								</div>
							</form>
							<a href="add.do"><input class="btn btn-success" type="button" value="添加角色" style="float: right;background: #286090;"></a>
							<table class="table">
								<thead>
									<tr>
										<th>编号</th>
										<th>名称</th>
										<th>所属部门</th>
										<th>状态</th>
										<th>说明</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${roles }" var="role">
										<tr class="odd gradeX">
											<td>${role.id }</td>
											<td>${role.roleName }</td>
											<td>${role.depart }</td>
											<c:if test="${role.isStop==1 }">
												<td>可用</td>
											</c:if>
											<c:if test="${role.isStop==0 }">
												<td>停用</td>
											</c:if>
											<td>${role.roleProfile }</td>
											<td>
												<a title="修改" class="t-edit " href="update.do?id=${role.id }"><i class="iconfont icon-shuru"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;
												<a title="删除" class="t-del " href="javascript:void(0)" onclick="del('${role.id }')"><i class="iconfont icon-shanchu"></i></a>
											</td>
										</tr>
									</c:forEach>
									</tbody>
								</table>
							</div>

							<!--分页显示-->
							<div class="row ">
								<div class="col-md-6 ">
									<div class="pagination " style="margin: 0px; " role="alert " aria-live="polite " aria-relevant="all ">显示 1 到 ${role.getPages()} 页 记录数${role.getTotal()}</div>
								</div>
								<!-- 动态分页 -->
								<div class="row">
								<div id="page" class="col-md-6" style="text-align: right;float:right;" ></div>
								</div>
							</div>
							<!--分页显示-->
						</div>
					</div>
					<!--表格结束 -->
				</div>
			</div>
		
		<!-- Mainly scripts -->
		<script src="${resource }/js/jquery-2.1.1.min.js "></script>
		<script src="${resource }/js/bootstrap.min.js?v=3.4.0 "></script>

	</body>
	<script>
		function flow_detail(x) {
			alert(x);
			window.location.href = " ";
		}
	</script>
	<script>
		/*删除角色函数*/
		function del(x){
			var rs=	confirm("您确定删除该角色吗？");
			var id=x;
			if(rs){
				$.ajax({
					type:"post",
					data:{"id":id},
					"dataType":"json",
					url:"del.do",
					async:false,
					"success":function(data){
						if(data=="1"){
							window.location.href="show.do";
						}else{
							alert("删除失败！");
						}
					}
				})
			}
		}
	</script>
	<!-- 分页插件，依赖于jquery位于jquery之后 -->
	<script src="${resource }/js/page.js"></script>
	<!-- 分页插件调用 -->
	<script type="text/javascript" >
	function submit(){
		var form=document.getElementById('myform');
		form.submit();
	}
	$(function(){
			/* 分页插件使用 */
			$("#page").page({/* #page是分页条div的id，调用分页插件page.js中封装的page函数*/
				pageNo:${role.getPageNo()},/*向page函数传  当前页数，当前页数从controller获取*/
				totalPage:${role.getPages()},/*向page函数传  总页数，总页数从controller获取*/
				url:"${role.getUrl()}",/*向page函数传  处理分页的controller地址*/
				params:"${role.getParams()}"
			});
		}) 
	</script>
</html>